<template>
    <!-- 背景图片 -->
    <div class="background">
        <!-- 居中选择性别 -->
        <Male 
        :setShowMale="setShowMale"
        v-if="isshow === 'male'"
        ></Male>
        <!-- 抽取纸条 -->
        <Extract 
        :setShowMale="setShowMale"
        :showLoading="showLoading" 
        :hideLoading="hideLoading" 
        :changeAddress="changeAddress"
        v-else-if="isshow === 'extract'"
        ></Extract>
        <!-- 打开纸条 -->
        <Open
        :setShowMale="setShowMale"
        :showLoading="showLoading" 
        :hideLoading="hideLoading"
        :address="address"
        v-else-if="isshow === 'open'"
        ></Open>
        <!-- 加载中 -->
        <Loading
        v-show="isloading"
        ></Loading>
        <Put
        :setShowMale="setShowMale"
        v-if="isshow === 'put'"
        ></Put>
    </div>
</template>

<script setup>
import Male from '@/components/male.vue';
import Extract from '@/components/extract.vue';
import Open from '@/components/open.vue';
import Put from '@/components/put.vue'
import Loading from '@/components/loading.vue';
import { ref, onMounted, reactive } from 'vue';


const isshow = ref('male');
// 是否在加载中
const isloading = ref(false);
// 选择的地址
const address = ref('');
// 修改地址
const changeAddress = (selectAddress) => {
  address.value = selectAddress;
}

const resultData = reactive({
      address: '',
      contact:'',
      id: '', 
      sex: '',
})

// 封装一个控制显示加载中的方法
const showLoading = () => {
  isloading.value = true;
}

// 封装一个控制隐藏加载中的方法
const hideLoading = () => {
  isloading.value = false;
}

/*
* @param {string} showMale 展示所传入的窗口数据
*/
const setShowMale = (showMale) => {
    isshow.value = showMale;
}

// 向open组件传递数据
const sendData = (data) => {
  const {id, address, contact, sex} = data.data; 
  resultData.id = id,
  resultData.address = address,
  resultData.contact = contact;
  resultData.sex = sex
}

// 组件挂载后,发送请求
onMounted(() => {

})


</script>

<style scoped>
.background {
    background-image: url('@/assets/background.png');
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
    position:fixed;
    top: 0;
    left: 0;
    background-size:100% 100%;
}

</style>